<#compress>
    <!DOCTYPE html>
    <html>
    <head>
        <title>登录</title>
        <meta name="keywords" content="login">
        <meta name="description" content="login">
        <meta name="content-type" content="text/html; charset=UTF-8">
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <#include "/admin/include/bootstrap.ftl">
            <style type="text/css">
                body {
                    background-color: #e5e7ed;
                    background: url(/www/admin/img/login-bg.jpg);
                    background-repeat: no-repeat;
                    background-size: 100%;
                }

                .img-circle {
                    box-shadow: 0px 0px 4px #868282;
                }

                login-page {
                    background-color: #e5e7ed;
                    min-height: 100vh;
                }

                .login-page main {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 100%;
                    max-width: 460px;
                }

                .login-block {
                    background-color: #fff;
                    padding: 60px;
                    box-shadow: 0 3px 50px 0 rgba(0, 0, 0, .1);
                    text-align: center;
                    border-radius: 5px;
                }

                .login-block h1 {
                    font-size: 16px;
                    margin-bottom: 40px;
                    margin-top: 40px;
                    font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
                    color: gray;
                }

                .login-links {
                    padding: 15px 5px 0;
                    font-size: 13px;
                    color: #96a2b2;
                }

                .chklab {
                    color: gray;
                    cursor: pointer;
                    font-size: 12px;
                    font-weight: normal;
                    display: inline;
                }

                .btn {
                    line-height: 42px;
                    font-size: 16px;
                    letter-spacing: 1px;
                    border-color: #ef5350;
                    padding: 0 30px;
                    color: #fff;
                    background-color: #ef5350;
                    transition: all .4s ease;
                    box-shadow: 0px 0px 4px #868282;
                    border-radius: 2em;
                }
            </style>
            </head>

    <body class="login-page" style="background-color:#e5e7ed">
    <main>
        <div class="login-block">
            <a href="http://51so.info"><img src="/www/admin/img/login-img.jpg" class="img-circle"
                                            width="144px" height="144px" alt="51so" data-toggle="tooltip"
                                            data-placement="bottom" title="51so一家专业做个人资料整理的网站 ~"></a>

            <h1>
                <#if msg??><span style="color:red;">${msg}</span>
                    <#else>51so致力打造更适合您的写作平台
                </#if>
            </h1>
            <form action="" method="post" role="form">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input type="text" class="form-control" name="account" required
                               placeholder="帐号">
                    </div>
                </div>
                <hr class="hr-xs">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        <input type="password" class="form-control" name="password" required
                               placeholder="密码">
                    </div>
                </div>
                <hr class="hr-xs">
                <#if login_error?? &&(login_error>0)>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span> <input
                                type="text" class="form-control" maxlength="4"
                                placeholder="输入下方验证码" required name="vcode">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group" style="margin: 0 auto;">
                            <img class="verifyimg reloadverify" alt="点击切换" data-toggle="tooltip" data-placement="bottom"
                                 title="看不清换一张，请单击我。"
                                 src="vcode.do" style="cursor:pointer;" onclick="reloadVcode(this);">
                        </div>
                    </div>
                </#if>
                <div class="form-group">
                    <div class="input-group">
                        <input type="checkbox"  id="isrchk"  name="isRemember" >
                        <label class="chklab" for="isrchk"> 3天免登录</label>
                    </div>
                </div>
                <button class="btn btn-block" type="submit"><i class="glyphicon glyphicon-send"></i> 马上登录</button>
            </form>
        </div>
        <div class="login-links">
            <a class="pull-left" href="sendResetMail.do">忘记密码?</a>
            <a class="pull-right" data-toggle="tooltip" data-placement="bottom" title="内测中,暂未开放，详情请留意官网动态!">注册一个账号</a>
        </div>
    </main>
    </body>
    <script type="text/javascript">
        $(function () {
            $("[data-toggle='tooltip']").tooltip();
        });
        function reloadVcode(obj) {
            obj.src = 'vcode.do?' + Date.parse(new Date());
        }
        function forgetPsw() {
            bootbox
                    .prompt(
                            "输入邮箱找回密码!",
                            function (result) {
                                var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                                if (!myreg.test(result)) {
                                    alert("邮箱格式不正确!");
                                    return;
                                }
                            })
        }
    </script>
    </html>
</#compress>
